<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>

	<div id="app">
		
	</div>
	<script src="../../vue.js"></script>
	<script>

		//定义student组件
		const Student = Vue.extend({
			template: `
			<div>
			    <h2>学生名称：{{name}}</h2>
			    <h2>学生年龄：{{age}}</h2>
			</div>`,
			name: "Student",
			data() {
				return {
					name: "兰兰姐",
					age: 18
				};
			},
		});

		//定义school组件
		const school = Vue.extend({
			template: `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
				<Student/>
            </div>`,
			name: "School",
			data() {
				return {
					name: "广州白云学校",
					address: "白云江高"
				};
			},
			components: {
				Student
			}

		});

		const Hello = Vue.extend({
			template: `<h1>{{msg}}</h1>`,
			name: "Hello",
			data() {
				return {
					msg: "欢迎到哔哩哔哩谢谢"
				};
			},
		})

		const app = Vue.extend({
			template:
				`
			<div>
			<my-school></my-school>
			<Hello></Hello>
			</div>
			`,
			components: {
				'my-school': school, Hello
			}
		})

		//创建vm
		new Vue({
			el: '#app',
			data() {
				return {

				};
			},
			//注册组件 局部
			components: {
				app
			},
			template:`<app></app>`
		});
	</script>
</body>

</html>